<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../lib/bxslider/css/jquery.bxslider.css">
    <link rel="stylesheet" href="../css/top.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../lib/jquery-1.12.4.js"></script>
    <script src="../lib/bxslider/js/jquery.bxslider.js"></script>
    <script src="../lib/template-web.js"></script>
</head>
<body> 
    <!-- 头部导航栏 -->
    <nav>
        <div class="nav-wrap">
            <a>小米商城</a>
            <span>|</span>
            <a>MIUI</a>
            <span>|</span>
            <a>loT</a>
            <span>|</span>
            <a>云服务</a>
            <span>|</span>
            <a>金融</a>
            <span>|</span>
            <a>有品</a>
            <span>|</span>
            <a>小爱开放平台</a>
            <span>|</span>
            <a>企业团购</a>
            <span>|</span>
            <a>资质证照</a>
            <span>|</span>
            <a>协议规则</a>
            <span>|</span>
            <a>下载app</a>
            <span>|</span>
            <a>SelectLocation</a>
            <div class="nav_right">
                <a href="">登录</a>
                <span>|</span>
                <a href="">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
                <a href="" class="shopping_cart">购物车(0)</a>
            </div>
        </div>
    </nav>
    <!-- 搜索栏 -->
    <div class="site-header">
        <div class="hearder_l">
            <div class="con">
                <a href="#"> <img src="../images/mi-home.png" alt=""></a>
                <a href="#"> <img src="../images/mi-logo.png" alt=""></a>
            </div>
        </div>
        <div class="hearder_r">
            <div class="hearder_nav">
                <a href="">小米手机</a>
                <a href="">Redmi红米</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">智能硬件</a>
                <a href="">服务</a>
                <a href="">社区 </a>
            </div>
            <form class="hearder_search">
                <input type="text" class='input'>
                <a href="" class="a"></a>
                <ul class="ul"></ul>
            </form>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <ul class="bxslider">
            <li><img src="../images/1.jpg"/></li>
            <li><img src="../images/2.jpg"/></li>
            <li><img src="../images/3.jpg"/></li>
            <li><img src="../images/4.jpg"/></li>
            <li><img src="../images/5.jpg"/></li>
          </ul>
          <ul class="banner_r">
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
          </ul>
          <div class="banner_list_details"></div>
    </div>
    <script type="text/template" id="list_details">
       
        <ul class="list_details_con">
             {{each json}}
            <li>
                <a href="{{$value.href}}">
                    <img src="{{$value.src}}" alt="" >
                    <span>{{$value.name}}</span>
                </a>
            </li>
            {{/each}}
        </ul>
       
    </script>
    <!-- <script>
         $.get('../../src/js/data.json',function(data){
                  var html = template('list_details',{"json":data});
                
                  $('.banner_list_details').append(html);
              },'json')
    </script> -->
    <script src="../js/index.js"></script>
</body>
</html>